<template>
  <div>
    <form-dialog ref="formDrawerRef" title="审核详情" top="2vh" width="90%" :isButton="false">
      <template #header>
        <div>
          <span class="text-[18px]">审核列表</span
          ><span class="ml-2 text-[var(--el-color-primary)]">双击查看详情</span>
        </div>
      </template>
      <div class="dialog-body">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ color: '#fff', backgroundColor: '#409EFF' }"
          @row-dblclick="handleRowClick"
        >
          <el-table-column
            prop="verificationMaterialName"
            label="证件"
            width="320"
            align="center"
          />
          <el-table-column prop="createTime" label="上传日期" width="120" align="center" />
          <el-table-column prop="department" label="审核部门" width="180" align="center" />
          <el-table-column
            prop="verificationApprover"
            label="审核人员"
            width="120"
            align="center"
          />
          <el-table-column
            prop="approvalPersonnelPhone"
            label="审核人电话"
            width="120"
            align="center"
          />
          <el-table-column prop="approvalOpinion" label="审核意见" align="center" />
          <el-table-column prop="pushStatus" label="证件审核状态" width="120" align="center">
            <template #default="scope">
              <span v-if="scope.row.pushStatus == 0">待审核</span>
              <span v-if="scope.row.pushStatus == 1">审核成功</span>
              <span v-if="scope.row.pushStatus == 2">审核失败</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <form-dialog
        ref="detailRef"
        title="审核车辆材料信息"
        :appendToBody="true"
        top="2vh"
        width="90%"
        :isButton="false"
      >
        <div class="dialog-body">
          <el-descriptions class="top" label-width="80" :column="3" border>
            <el-descriptions-item label="所属企业">{{
              formDialogRecord.belongCompany
            }}</el-descriptions-item>
            <el-descriptions-item label="车牌号码">{{
              formDialogRecord.licensePlate
            }}</el-descriptions-item>
            <el-descriptions-item label="道路运输证有效期至">{{
              formDialogRecord.endValidTime
            }}</el-descriptions-item>
            <el-descriptions-item label="检测单号">{{
              formDialogRecord.inspectionId
            }}</el-descriptions-item>
            <el-descriptions-item label="车辆技术等级">
              <!-- 1:待评定 ；2：一级；3：二级-->
              {{
                formDialogRecord.vehicleLevel === "1"
                  ? "待评定"
                  : formDialogRecord.vehicleLevel === "2"
                    ? "一级"
                    : formDialogRecord.vehicleLevel === "3"
                      ? "二级"
                      : ""
              }}
            </el-descriptions-item>
            <el-descriptions-item label="客车类型等级">{{
              formDialogRecord.typeLevel
            }}</el-descriptions-item>
            <el-descriptions-item label="责任险到期日">{{
              formDialogRecord.licensePlate
            }}</el-descriptions-item>
            <el-descriptions-item label="等级评定日期">{{
              formDialogRecord.licensePlate
            }}</el-descriptions-item>
            <el-descriptions-item label="等级评定有效期">{{
              formDialogRecord.nowEvaluationTime
            }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title=" " border>
            <el-descriptions-item :rowspan="2" :width="140" label="材料照片" align="center">
              <el-image
                style="width: 100px; height: 100px"
                :src="formDialogMaterials.photo"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[formDialogMaterials.photo]"
                :initial-index="4"
                fit="cover"
              />
            </el-descriptions-item>
            <el-descriptions-item label="材料类型">{{
              formDialogMaterials.verificationMaterialName
            }}</el-descriptions-item>
            <el-descriptions-item label="上传日期">{{
              formDialogMaterials.uploadTime
            }}</el-descriptions-item>
          </el-descriptions>
          <el-form ref="formRef" :model="form" :rules="rules">
            <el-descriptions title=" " direction="vertical" border style="margin-top: 20px">
              <el-descriptions-item label="审核状态">
                <el-form-item prop="pushStatus">
                  <!-- {{ formDialogMaterials.pushStatus }} -->
                  <el-select
                    v-model="form.pushStatus"
                    placeholder="待审核"
                    size="large"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item
                label="审核意见"
                v-if="form.pushStatus == 2 || form.pushStatus == 0"
              >
                <el-form-item prop="approvalOpinion">
                  <el-input
                    v-model="form.approvalOpinion"
                    style="width: 340px"
                    :rows="3"
                    type="textarea"
                    placeholder="审核不通过时必须填写审核意见"
                  />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="审核人">{{
                formDialogMaterials.verificationApprover
              }}</el-descriptions-item>
              <el-descriptions-item label="审核部门">
                {{ formDialogMaterials.department }}
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </div>
        <template #footer>
          <div class="flex justify-center">
            <el-button type="primary" @click="handlePrevious">上一条</el-button>
            <el-button type="primary" @click="handleNext">下一条</el-button>
            <el-button
              type="danger"
              @click="handleSubmit"
              v-if="formDialogMaterials.pushStatus == 0"
              >审核</el-button
            >
          </div>
        </template>
      </form-dialog>
    </form-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import FormDialog from "@/components/FormDialog.vue";
import { submitAnnualVerificationMaterials, getAnualVerificationMaterials, getAnnualViewCheckCarList } from "@/api/annualAudit";
import { ElMessage } from "element-plus";
// import { push } from "echarts/types/src/component/dataZoom/history.js";

const form: any = ref({});
const rules = {
  pushStatus: [
    {
      required: true,
      message: "请选择审核状态",
      trigger: "change"
    }
  ],
  approvalOpinion: [
    {
      required: true,
      message: "请填写审核意见",
      trigger: "blur"
    }
  ]
};

const tableData: any = ref([]);
const formDrawerRef: any = ref();
const dataValue: any = ref({});
const currentRow: any = ref({});
const options = [
  {
    value: 1,
    label: "审核通过"
  },
  {
    value: 2,
    label: "审核不通过"
  }
];

const handleOpen = (val: any) => {
  // 使用dataValue变量保存年审记录页面点击的数据
  dataValue.value = val;
  //console.log(val);
  // 取得年审记录里面的编号和审核状态传递给请求接口 获取资料数据
  getAnnualViewCheckCarList(val.acceptanceId).then((res) => {
    tableData.value = res;
  
  });
  formDrawerRef.value.open();
};
const formDialogRecord: any = ref({});
const formDialogMaterials: any = ref({});
const handleRowClick = (row: any) => {
  //console.log(row);
  currentRow.value = row;
  //console.log(currentRow.value.id, currentRow.value);
  getAnualVerificationMaterials(currentRow.value.id).then((res: any) => {
    //审核信息
    formDialogMaterials.value = res.materials;
    form.value = {
      pushStatus: res.materials.pushStatus,
      approvalOpinion: res.materials.approvalOpinion
    }
    //审核材料信息
    formDialogRecord.value = res.record;
    form.value = {
      approvalOpinion: res.materials.approvalOpinion,
      pushStatus: res.materials.pushStatus ? res.materials.pushStatus : ""
    };
  });
  handleDetail(row);
};
const detailRef = ref();
const handleDetail = (row: any) => {
  detailRef.value.open(row);
};
// 上一条
const handlePrevious = () => {
  const index = tableData.value.findIndex((item: any) => item.id === currentRow.value.id);
  currentRow.value = tableData.value[index - 1 < 0 ? 0 : index - 1];
  handleRowClick(currentRow.value);
};
// 下一条
const handleNext = () => {
  const index = tableData.value.findIndex((item: any) => item.id === currentRow.value.id);
  currentRow.value =
    tableData.value[index + 1 >= tableData.value.length ? tableData.value.length - 1 : index + 1];
  handleRowClick(currentRow.value);
};

const formRef = ref();
// const emit = defineEmits(["refresh"]);
// 审核
const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    //console.log(valid)
    if (valid) {
      submitAnnualVerificationMaterials({ ...form.value, id: currentRow.value.id }).then((res) => {
        console.log(res);
        ElMessage.success("提交成功");
        // emit("close");
        // formDrawerRef.value.close()
        // emit("refresh")
        getAnualVerificationMaterials(currentRow.value.id).then((res:any) => {
          console.log(res)  
          //审核信息 materials

          formDialogMaterials.value = res.materials;
          //审核材料信息
          formDialogRecord.value = res.record;
          form.value = {
            approvalOpinion: res.materials.approvalOpinion,
            pushStatus: typeof res.materials.pushStatus != 'number' ? "": res.materials.pushStatus
          };
        });
      });
    }
  });
};
// defineExpose是Vue提供的组件通信方式，用于向父组件暴露方法，让父组件调用。
// 这里暴露了一个handleOpen方法，用于打开表单弹框，并传递数据
defineExpose({
  handleOpen
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-detail {
  height: calc(100vh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.cell) {
  font-weight: 700;
}

:deep(.el-table__row .cell) {
  cursor: pointer;
}

:deep(.my-label) {
  font-weight: 700 !important;
}

:deep(.my-content) {
  width: 40% !important;
  font-weight: 700 !important;
}

:deep(.top .el-descriptions__label) {
  width: 120px;
}

// el-descriptions__content
:deep(.top .el-descriptions__content) {
  width: 360px;
}
</style>
